<!--
    A solitaire game board
  -->
<link rel="import" href="card-element.html">
<link rel="import" href="card-collection-element.html">
<link rel="import" href="deck-element.html">
<element name="gameboard-element" constructor="Gameboard"
         on-trackstart="trackStart" on-track="track" on-trackend="trackEnd">
  <template>
    <style>
    @host {
        gameboard-element {
            display:block;
            margin:0;
        }
    }
      #gameboard {
      width: 100%;
      height: 100%;
      position:relative;
      display:block;
      }
    </style>
    <div id="gameboard" touch-action="none">
      <card-collection id="deck" on-tap="draw" pseudo="x-deck"></card-collection>
      <card-collection id="hand" pseudo="x-hand">
        <card-card value="13" suit="hearts" faceup="true"></card-card>
        <card-card value="11" suit="diamonds" faceup="true"></card-card>
        <card-card value="10" suit="spades" faceup="true"></card-card>
      </card-collection>
    </div>
  </template>
  <script>
    var HAND_COUNT = 3;
Polymer.register(this, {
    draw: function() {
        var cards = this.$.deck.dealHand(HAND_COUNT);
        cards.map(function(card){card.faceup = true;});
        this.$.hand.cards = cards;
    },
    ready: function() {
        // this.$.deck.shuffle();
    },
    trackStart: function(event) {
        var elt = event.target;
        console.log('trackStart on ' + elt);
        // while (elt && elt.parentNode && elt.parentNode !== this.designElement && elt !== this.designElement) {
        //   elt = elt.parentNode;
        // }
        // if (elt === this.designElement) {
        //   elt = null;
        // }
        this.tracking = elt;
        if (elt) {
            event.trackInfo.start = {x: elt.offsetLeft, y: elt.offsetTop};
        }
        event.stopPropagation();
    },
    track: function(event) {
        if (this.tracking) {
            var p = {
                x: event.trackInfo.start.x + event.dx,
                y: event.trackInfo.start.y + event.dy
            };
            console.log('track: ' + p);
            // p = this.snap(p.x, p.y);
            this.tracking.style.left = p.x + 'px';
            this.tracking.style.top = p.y + 'px';
            event.stopPropagation();
        }
    },
    trackEnd: function(event) {
        console.log('trackEnd');
        this.tracking = null;
        event.stopPropagation();
        // this.send('design-changed');
    }
});

document.addEventListener('WebComponentsReady', function() {
    document.removeEventListener('WebComponentsReady');
});
  </script>
</element>
